<template>
  <el-container>
    <el-header>
      <h3>学员信息</h3>
    </el-header>
    <el-main>
      <el-form :model="form" ref="form" :rules="rule" label-width="350px" label-position="right">
          <el-form-item label="学员图像" prop="avatar">
            <el-upload disabled
              class="avatar-uploader"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload">
              <img v-if="form.avatar" :src="form.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
           <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
           </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
              <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="所属教练" prop="coach_id">
              <el-select v-model="form.coach_id">
                <el-option
                  v-for="item in coachList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="学员类型" prop="type_id">
            <el-select v-model="form.type_id">
              <el-option
                v-for="item in typeList"
                :label="item.name"
                :key="item.id"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="拿照进度" prop="degree_id">
            <el-select v-model="form.degree_id">
              <el-option
                v-for="item in degreeList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="约车权限" prop="auth">
              <el-switch v-model="form.auth"></el-switch>
          </el-form-item>
          <el-form-item label="推荐学员数目" prop="recommend_total">
            <el-input-number v-model="form.recommend_total" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="约车次数" prop="reserve_count">
            <el-input-number v-model="form.reserve_count" :min="min_reserve_count"></el-input-number>
          </el-form-item>
          <el-form-item label="考试次数" prop="exam_count">
            <el-input-number v-model="form.exam_count" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="挂科次数" prop="fail_count">
            <el-input-number v-model="form.fail_count" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="是否报名" prop="apply">
            <el-switch v-model="form.apply"></el-switch>
          </el-form-item>
          <el-form-item label="是否毕业" prop="graduation">
            <el-switch v-model="form.graduation"></el-switch>
          </el-form-item>
          <el-form-item label="创建时间" prop="create_time">
            <el-date-picker
              v-model="form.create_time"
              type="date"
               disabled>
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-edit" type="primary" @click.prevent="update">保存</el-button>
          </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import {studentInfo, updateStudentInfo, checkStudentExist} from '@/api/student'
  import {getCoachList} from '@/api/coach'
    export default {
        name: "info",
        inject: ['reload'],
        data () {
            const checkTelephone = (rule, value, callback) => {
                var pattern = /^1\d{10}$/;
                if (!pattern.test(value)){
                    callback(new Error('手机号码不正确'));
                } else {
                    callback();
                }
            };
            const checkUser = (rule, value, callback) => {
                if (value == this.old_mobile) {
                    return callback();
                }
                checkStudentExist({mobile: value}).then(response => {
                    callback();
                }).catch( err => {
                    callback(new Error(err));
                })
            };
            return {
                form: {
                    avatar: '',
                    name: '',
                    mobile: '',
                    coach_id: 0,
                    type_id: 0,
                    degree_id: 0,
                    auth: false,
                    recommend_total: 0,
                    reserve_count: 0,
                    exam_count: 0,
                    fail_count: 0,
                    create_time: '',
                    apply: false,
                    graduation : false
                },
                uploadUrl: 'https://huaxin.ioboo.cn/admin/uploadStudentImage',
                student_id: 0,
                rule: {
                    name: [
                        {required: true, message: '学员名称为必填项', trigger: ['blur','change']},
                        {min:2, message: '学员名称最少两位字符', trigger: ['blur','change']}
                    ],
                    mobile: [
                        {required: true, message: '手机号码为必填项', trigger: 'blur'},
                        {validator: checkTelephone, message: '手机号码格式不正确'},
                        {validator: checkUser, message: '该手机号码已经存在',trigger: ['change']}
                    ],
                    coach_id: [
                        {required: true, message: '所属教练为必填项'},
                        {type: 'number', message: '请选择合法的教练选项'}
                    ],
                    type_id: [
                        {required: true, message: '学员类型为必填项'},
                        {type: 'number', message: '请选择合法的学员类型'}
                    ],
                    degree_id: [
                        {required: true, message: '拿照进度为必填项'},
                        {type: 'number', message: '请选择合法的拿照进度'}
                    ]
                },
                coachList: [],
                typeList: [
                    {id: 1, name: '普通学员'},
                    {id: 2, name: 'vip学员'}
                ],
                degreeList: [
                    {id: 0, name: '未开始' },
                    {id: 1, name: '科目一'},
                    {id: 2, name: '科目二'},
                    {id: 3, name: '科目三'},
                    {id: 4, name: '科目四'}
                ],
                loading: false,
                old_mobile: '',
                min_reserve_count: 0,
            };
        },
        methods: {
            uploadSuccess(response, file, fileList) {
                if (response.code == 200) {
                    this.form.imageUrl = response.data.url;
                } else {
                    this.$notify.error(response.msg);
                }
            },
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            //更新学员信息
            update() {
                //整理数据
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }

                    var data = {
                        student_id: this.student_id,
                        name: this.form.name,
                        mobile: this.form.mobile,
                        coach_id: this.form.coach_id,
                        type_id: this.form.type_id,
                        degree_id: this.form.degree_id,
                        auth: this.form.auth === true ? 1 : 2,
                        recommend_total: this.form.recommend_total,
                        reserve_count: this.form.reserve_count,
                        exam_count: this.form.exam_count,
                        fail_count: this.form.fail_count,
                        apply_status: this.form.apply === true ? 2 : 1,
                        graduation: this.form.graduation === true ? 2 : 1,
                    };
                    this.loading = true;
                    updateStudentInfo(data).then(response => {
                        this.$message.success(response.msg);
                        this.loading = false;
                        this.reload();
                    }).catch(err => {
                        this.loading = false;
                    })
                })
            }
        },
        mounted() {
            this.student_id = this.$route.query.student_id;
            getCoachList().then(response => {
                this.coachList = response.data;
                studentInfo({student_id: this.student_id}).then(response => {
                    this.form = response.data;
                    this.old_mobile = response.data.mobile;
                    this.min_reserve_count = response.data.reserve_count;
                })
            }).catch(err => {
                this.$message.error('获取信息失败');
            })
        }
    }
</script>

<style scoped>
  .el-container{
    width: 70%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin: 10px auto;
    border: 1px solid #F2F6FC;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }
  .el-header{
    text-align: center;
  }

  .el-header h3{
    font-size: 20px;
    height: 20px;
    line-height: 20px;
  }

  .el-main .el-input {
    width: 40%;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
